<template>
    <div class="app-container">
         <div class="content-title" style="text-align: left;">
            <span class="content-titleText" >{{form.id?'编辑商户':'新建商户'}}</span>
        </div>
        <div class="x-step radioNoDis" >
            <el-radio-group v-model="radio3"   ref="step" :disabled = "true">
               <el-radio-button  v-for="(item,index) in stepList" :key="index" :label="item.id"  >{{item.name}}</el-radio-button>
             </el-radio-group>
            <!--<span :class="{'active': tagActive===1}">1、基本资料</span>
            <span :class="{'active': tagActive===2}">2、支付设置</span>
            <span :class="{'active': tagActive===3}">3、风控设置</span>
            <span :class="{'active': tagActive===4}">4、可用模版</span>-->
        </div>

        <div class="step-content baseSetting" v-if="tagActive==1">
            <el-form  ref="baseform" :model="baseParams"  :rules="baseRules" label-width="80px">
                <el-form-item label="商户名称" style="width: 500px;">
                    <el-input class="normal" v-model="baseParams.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人" style="width: 500px;">
                    <el-input class="normal" v-model="baseParams.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" style="width: 500px;">
                    <el-input class="normal" v-model="baseParams.name"></el-input>
                </el-form-item>
                <el-form-item label="联系地址" style="width: 500px;">
                    <el-input class="normal" type="textarea" v-model="baseParams.desc"></el-input>
                </el-form-item>
                <el-form-item label="购票链接" style="width: 500px;">
                    <el-input class="normal" type="textarea" v-model="baseParams.desc"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div class="step-content paySetting" v-else-if="tagActive==2">
            <el-form ref="payform" :model="payParams" :rules="payRules" label-width="80px">
                <el-form-item>
                    支付配置参考火影的设置方式，但每项支付后需要增加启用功能<el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
            </el-form>
        </div>

        <div class="step-content dangerSetting" v-else-if="tagActive==3">
            <el-form ref="dangerform" :model="dangerParams" :rules="dangerRules">
                <el-form-item>
                    <h3>虚拟号段设置</h3>
                    虚拟号段禁止参加任何活动及购票。请输入虚拟号段前三位，每个号段用“、”隔开，如177、199。<br>
                    <el-input></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div class="step-content modelSetting" v-else>
            <el-form ref="modelform"  :model="modelParams" :rules="modelRules">
                <el-row v-for="(item, key) in models" :key="key">
                    <el-form-item :label="item.type" v-for="(child, _key) in item.children" :key="_key" label-width="110px">
                        <br v-if="child.title!==''">
                        <span v-if="child.title!==''" style="display: inline-block;width:80px;text-align:right;margin-left: -92px;margin-right: 8px;">{{child.title}}</span>
                        <div class="x-model-box">
                            <el-checkbox v-model="item.checkAll">全选</el-checkbox><br>
                            <div class="x-model" v-for="(childM, __key) in child.model" :key="__key">
                                <el-checkbox v-model="childM.checked">{{childM.modelName}}</el-checkbox>
                                <div class="x-model-cover"><img :src="childM.modelCover" alt=""></div>
                            </div>
                        </div>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="prevStep(radio3)">上一步</el-button>
                 <el-button type="primary" @click="nextStep(radio3)">{{radio3==stepList.length?'完成':'下一步'}}</el-button>
                <el-button @click="closePage">取消</el-button>
            </div>
    </div>
</template>
<script>
//  mapState
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      radio3: '1',
      stepList: [{
        id: '1',
        name: '1、基本资料',
        stepDis: false
      }, {
        id: '2',
        name: '2、支付设置',
        stepDis: false
      }, {
        id: '3',
        name: '3、风控设置',
        stepDis: false
      }, {
        id: '4',
        name: '4、可用模版',
        stepDis: false
      }],
      baseParams: {},
      baseRules: {},
      payParams: {},
      payRules: {},
      dangerParams: {},
      dangerRules: {},
      modelParams: {},
      modelRules: {},
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tagActive: 1,
      models: [
        {
          type: '限时抢券模版',
          children: [
            {
              title: '',
              checkAll: false,
              model: [
                { id: 1, modelName: '模版1', modelCover: '', checked: false },
                { id: 2, modelName: '模版2', modelCover: '', checked: false },
                { id: 3, modelName: '模版3', modelCover: '', checked: false },
                { id: 4, modelName: '模版4', modelCover: '' },
                { id: 5, modelName: '模版5', modelCover: '', checked: false },
                { id: 6, modelName: '模版6', modelCover: '', checked: false },
                { id: 7, modelName: '模版7', modelCover: '', checked: false }]
            }
          ]
        },
        {
          type: '抽奖模版',
          children: [
            {
              title: '大转盘',
              checkAll: false,
              model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false }, { id: 2, modelName: '模版2', modelCover: '', checked: false }, { id: 3, modelName: '模版3', modelCover: '', checked: false }, { id: 4, modelName: '模版4', modelCover: '' }, { id: 5, modelName: '模版5', modelCover: '', checked: false }, { id: 6, modelName: '模版6', modelCover: '', checked: false }, { id: 7, modelName: '模版7', modelCover: '', checked: false }]
            },
            {
              title: '刮刮乐',
              checkAll: false,
              model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false }, { id: 2, modelName: '模版2', modelCover: '', checked: false }, { id: 3, modelName: '模版3', modelCover: '', checked: false }, { id: 4, modelName: '模版4', modelCover: '' }, { id: 5, modelName: '模版5', modelCover: '', checked: false }, { id: 6, modelName: '模版6', modelCover: '', checked: false }, { id: 7, modelName: '模版7', modelCover: '', checked: false }]
            },
            {
              title: '翻牌',
              checkAll: false,
              model: [{ id: 1, modelName: '模版1', modelCover: '' }, { id: 2, modelName: '模版2', modelCover: '' }, { id: 3, modelName: '模版3', modelCover: '' }, { id: 4, modelName: '模版4', modelCover: '' }, { id: 5, modelName: '模版5', modelCover: '' }, { id: 6, modelName: '模版6', modelCover: '' }, { id: 7, modelName: '模版7', modelCover: '' }]
            }
          ]
        },
        {
          type: 'H5主活动模版',
          children: [
            {
              title: '',
              checkAll: false,
              model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false }, { id: 2, modelName: '模版2', modelCover: '', checked: false }, { id: 3, modelName: '模版3', modelCover: '', checked: false }, { id: 4, modelName: '模版4', modelCover: '' }, { id: 5, modelName: '模版5', modelCover: '', checked: false }, { id: 6, modelName: '模版6', modelCover: '', checked: false }, { id: 7, modelName: '模版7', modelCover: '', checked: false }]
            }
          ]
        }
      ],
      checked: true
    }
  },
  watch: {
    $route () {

    }
  },
  methods: {
    // onSubmit() {
    //     console.log('submit!');
    // },
    ...mapActions('app', ['handleRemoveTab']),
    nextStep (radio3) {
      this.tagActive = String(parseInt(radio3) + 1)
      if (this.radio3 < this.stepList.length) {
        this.radio3 = String(parseInt(radio3) + 1)
      }
      this.tagActive = this.radio3
    },
    prevStep (radio3) {
      this.tagActive = String(parseInt(radio3) - 1)
      if (this.radio3 + '' !== '1') {
        this.radio3 = String(parseInt(radio3) - 1)
      }
      this.tagActive = this.radio3
    },
    closePage () {
      // this.$store.dispatch('handleChangetabs', this.$route);
      this.closeTab(true)
    }
  },
  async created () {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
    }
  }
}
</script>
<style lang="scss" scoped>
.step-content{
    height: 600px;
    overflow-y: scroll;
}
/*@import "src/styles/var.scss";*/
    /*.x-step {
        display: flex;margin-bottom: 20px;
        span {
            display: inline-block;
            width: 160px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            /*color: @color-grey-font;*/
            /*font-size: @font14;*/
            /*border: 1px solid @color-grey-border;*/
            /*box-sizing: border-box;
            &:first-child {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            &:last-child {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            &.active {
                color: #fff;
                border: 0;*/
                /*background: @color-blue;
            }
        }
    }*/

    .x-model-box {
        display: inline-block;
        vertical-align: top;
        .x-model {
            display: inline-block;
            margin-right: 20px;
            .x-model-cover {
                width: 90px;
                height: 120px;
                /*background: @color-grey-border;*/
            }
        }
    }
</style>
